<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <div th:replace="common/common::html"></div>
    <meta charset="UTF-8">
    <title th:text="#{user.page.tile}"></title>
    <script th:inline="javascript" >
        const userNameCode = 1001
        const emailCode = 1002
        const mobileCode = 1003
        let _gridWidth;
        let _gridHeight;

        //页面自适应
        function resizePageSize(){
            _gridWidth = $(document).width() - 12;/* -189 是去掉左侧 菜单的宽度， -12 是防止浏览器缩小页面 出现滚动条 恢复页面时 折行的问题 */
            _gridHeight = $(document).height() - 75 - 38; /* -32 顶部主菜单高度， -38 查询条件高度*/
        }
        $(function () {
            resizePageSize()
            const _columnWidth = (_gridWidth - 75 -150) / 4;
            $("#flexigrid-id").flexigrid({
                width : _gridWidth,
                height : _gridHeight,
                url : /*[[@{/user/getUserInfoListByPage}]]*/"",
                dataType : 'json',
                colModel : [
                    {display : 'userUuid',name : 'userUuid',width : 150,sortable : false,align : 'center',hide : 'true'},
                    {display : /*[[#{user.name}]]*/"",name : 'userName',width : _columnWidth, sortable : true,align : 'center'},
                    {display : /*[[#{user.nick}]]*/"",name : 'niceName',width : _columnWidth, sortable : true,align : 'center'},
                    {display : /*[[#{user.mobile}]]*/"",name : 'mobile',width : _columnWidth, sortable : true,align : 'center'},
                    {display : /*[[#{user.email}]]*/"",name : 'email',width : _columnWidth, sortable : true,align : 'center'},
                    {display : /*[[#{common.operation}]]*/"",name : 'userUuid',width : 150, sortable : true,align : 'center', process: function (v,_trid, _row) {
                        const modifyBtn = /*[[#{common.modify}]]*/''
                        let contends = ''
                            contends += '<a class="btn" title=" ' + modifyBtn + ' " onclick="modifyUserInfoById(\'' + v + '\')">'
                            contends += '<i class="glyphicon glyphicon-pencil"></i>'
                            contends += '</a>'
                            const deleteBtn = /*[[#{common.modify}]]*/'';
                            contends += ' <a class="btn" title="' + deleteBtn + '" onclick="deleteUserInfo(\'' + v + '\')">';
                            contends += ' <i class="glyphicon glyphicon-trash"></i>';
                            contends += ' </a>'
                            const allocateBtn = /*[[#{common.modify}]]*/'';
                            contends += ' <a class="btn" title="' + allocateBtn + '" onclick="allocateUserInfo(\'' + v + '\')">';
                            contends += ' <i class="glyphicon glyphicon-pushpin"></i>';
                            contends += ' </a>'
                            return contends
                        }}
                ],
                resizable : false, //resizable table 是否可伸缩
                useRp : true,
                usepager : true, //是否分页
                autoload : false, //自动加载，即第一次发起 ajax 请求
                hideOnSubmit : true, //是否在回调时显示遮盖
                showcheckbox : true, //是否显示多选框
                rowhandler : rowDbclick, //是否启用行的扩展事情功能,在生成行时绑定事件，如双击，右键等
                rowbinddata : true
        }).flexReload();
            //增加用户信息对话框
            $("#add-user-dialog-btn").dialog({
            autoOpen : false,
            width : 400,
            modal : true,
            resizable : false,
            title: /*[[#{main.add.user.tip}]]*/'',
            buttons: [
                {
                    text: /*[[#{common.confirm}]]*/'',
                    click: function() {
                        const flag = $("#add-user-form-id input.form-control").verification()
                        if(!flag){
                            return;
                        }
                        const newPasswd = $("#add-password-id").val();
                        const confirmPasswd = $("#add-again-password-id").val();
                        if(newPasswd !== confirmPasswd){
                            $("#add-password-id").addClass( "ui-state-error").focus();
                            return;
                        }
                        $("#add-user-form-id").submit()
                    }
                },
                {
                    text: /*[[#{common.cancel}]]*/'',
                    click: function() {
                        $( this ).dialog( "close" );
                    }
                }
            ]
        });
            $("#add-user-btn-id").click(function () {
            $("#add-user-dialog-btn").dialog('open');

        })
            //增加用户信息ajaxFrom请求
            $("#add-user-form-id").ajaxForm({
                dataType: "json",
                success: function (data) {
                    message(data.msg)
                    if (data.success) {
                        $("#add-user-dialog-btn").dialog('close')
                        $("#add-user-form-id").resetForm()
                        queryBtn()
                    } else if (data.code === userNameCode) {
                       $("#add-username-id").addClass("ui-state-error").focus()
                    } else if (data.code === emailCode) {
                        $("#add-user-email-id").addClass("ui-state-error").focus()
                    } else if (data.code === mobileCode) {
                        $("#add-user-phone-id").addClass("ui-state-error").focus()
                    }

                },
                error: function () {
                    message(/*[[#{common.error}]]*/)
                }
            })
            //修改用户信息对话框
            $("#mod-user-dialog-btn").dialog({
                autoOpen : false,
                width : 400,
                modal : true,
                resizable : false,
                title: /*[[#{main.mod.user.tip}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                            const flag = $("#mod-user-form-id input.form-control").verification()
                            if(!flag){
                                return;
                            }
                            $("#mod-user-form-id").submit()
                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                ]
            });
            //删除用户信息对话框
            $("#delete-user-dialog-id").dialog({
                autoOpen : false,
                width : 400,
                modal : true,
                resizable : false,
                title: /*[[#{main.delete.user.tip}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                            const ids = $("#delete-user-dialog-id").attr('user-ids')
                            $.ajax({
                                type: 'post',
                                dataType: 'json',
                                async: false,
                                url : /*[[@{/user/deleteUserInfoByIds}]]*/'',
                                data: [{name:'userUuids', value: ids}],
                                success: function (data) {
                                    message(data.msg)
                                    $("#delete-user-dialog-id").dialog('close')
                                    queryBtn()
                                },
                                error: function (data) {
                                    message(/*[[#{common.error}]]*/)
                                }

                            })
                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                ]
            });
            //分配用户角色对话框
            $("#allocate-user-dialog-id").dialog({
                autoOpen : false,
                width : 400,
                modal : true,
                resizable : false,
                title: /*[[#{main.allocate.user.tip}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                            const roleArray = []
                            const zTreeObj = $.fn.zTree.getZTreeObj("allocate-user-ztree-id")
                            const userUuidArray = $("#allocate-user-ztree-id").attr("userUuidArray")
                            const checked = zTreeObj.getCheckedNodes(true)
                            $(checked).each(function (index, item) {
                                roleArray.push(item.id)
                            })
                            $.ajax({
                                type: 'post',
                                dataType: 'json',
                                async: false,
                                url : /*[[@{/user/saveRoleRelUser}]]*/'',
                                data: [{name:'userUuidArray', value: userUuidArray},{name: 'roleArray',value: roleArray}],
                                success: function (data) {
                                    message(data.msg)
                                    $("#allocate-user-dialog-id").dialog('close')
                                },
                                error: function (data) {
                                    message(/*[[#{common.error}]]*/)
                                }

                            })

                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                ]
            });
            //修改用户信息ajaxFrom请求
            $("#mod-user-form-id").ajaxForm({
                dataType: "json",
                success: function (data) {
                    message(data.msg)
                    if (data.success) {
                        $("#mod-user-dialog-btn").dialog('close')
                        $("#mod-user-form-id").resetForm()
                        queryTable()
                    } else if (data.code === userNameCode) {
                        $("#mod-username-id").addClass("ui-state-error").focus()
                    } else if (data.code === emailCode) {
                        $("#mod-user-email-id").addClass("ui-state-error").focus()
                    } else if (data.code === mobileCode) {
                        $("#mod-user-phone-id").addClass("ui-state-error").focus()
                    }

                },
                error: function () {
                    message(/*[[#{common.error}]]*/)
                }
            })

            //删除用户
            $("#delete-user-btn-id").click(function () {
                const ids = $("#flexigrid-id").flexiData(1)
                if (ids.length === 0) {
                    message(/*[[#{common.select}]]*/'')
                    return;
                }
                $("#delete-user-dialog-id").attr('user-ids',ids).dialog('open')
            })

            //批量分配角色
            $("#allocate-user-role-id").click(function () {
                batchAllocateRole()
            });
            //用户详情对话框
            $("#user-detail-dialog-id").dialog({
                autoOpen : false,
                width : 400,
                modal : true,
                resizable : false,
                title: /*[[#{user.info}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                ]
            });

            //重置密码对话框
            $("#reset-password-dialog-id").dialog({
                autoOpen: false,
                width: 400,
                modal: true,
                resizable: false,
                title: /*[[#{user.reset.passwd.dialog}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function () {
                            var flag= $("#reset-password-dialog-id input.form-control").verification();
                            if(!flag){
                                return;
                            }
                            var newPassword = $("#reset-new-password-id").val();
                            var confirmPassword = $("#reset-confirm-password-id").val();
                            if(newPassword !==  confirmPassword){
                                $("#reset-new-password-id").addClass("ui-state-error");
                                $("#reset-new-password-id").focus();
                                return;

                            }
                            var userUuidArray = $("#reset-password-dialog-id").attr("userUuidArray");
                            var password = $("#reset-new-password-id").val();
                            $.ajax({
                                type: 'post',
                                async: false,
                                dataType : 'json',
                                url: /*[[@{/user/resetPassword}]]*/'',
                                data: [{name:"userUuidArray",value:userUuidArray},
                                    {name:"password",value: password}],
                                success: function (data) {
                                    message(data.msg);
                                    $("#reset-password-dialog-id").dialog('close');
                                },
                                error: function(msg){
                                    message(/*[[#{common.error}]]*/'');
                                }
                            });
                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function () {
                            $(this).dialog("close");
                        }
                    }
                ]
            });
            //重置密码按钮
            $("#reset-passwd-btn-id").click(function () {
                var ids = $("#flexigrid-id").findFlexData(0);
                if(ids.length ===0){
                    message(/*[[#{common.select}]]*/'');
                    return;
                }
                $("#reset-password-dialog-id").attr("userUuidArray",ids);
                $("#reset-password-dialog-id").dialog("open");
            });

        }); //ready

        function queryBtn() {
            const searchUserName = $("#searchUserName").val();
            const searchNiceName = $("#searchNiceName").val();
            const searchPhone = $("#searchPhone").val();
            const searchEmail = $("#searchEmail").val();
            $("#flexigrid-id").flexOptions({
                extParam:[
                    {name:"searchUserName",value:searchUserName},
                    {name:"searchNiceName",value:searchNiceName},
                    {name:"searchPhone",value:searchPhone},
                    {name:"searchEmail",value:searchEmail}
                ]
            }).flexReload();
        }

        function modifyUserInfoById(userUuid) {
            $("#mod-user-uuid-id").val(userUuid)
            $.ajax({
                type: 'post',
                dataType: 'json',
                async: false,
                url : /*[[@{/user/queryUserInfoById}]]*/'',
                data: [{name:'userUuid', value: userUuid}],
                success: function (data) {
                    $("#mod-user-dialog-btn").dialog('open')
                    $("#mod-username-id").val(data.userName)
                    $("#mod-user-name-id").val(data.niceName)
                    $("#mod-user-email-id").val(data.email)
                    $("#mod-user-phone-id").val(data.mobile)
                },
                error: function (data) {
                    message(/*[[#{common.error}]]*/)
                }

            })
        }

        //单条记录删除用户信息
        function  deleteUserInfo(userUuid) {
            $("#delete-user-dialog-id").attr("user-ids",userUuid).dialog('open');
        }

        const setting = {
            check: {
                enable: true
            },
            data: {
                simpleData: {
                    enable: true
                }
            }
        };
        //分配用户角色
        function allocateUserInfo(userUuid) {
            $("#allocate-user-ztree-id").attr("userUuidArray", userUuid)
            $.ajax({
                type: 'post',
                dataType: 'json',
                async: false,
                url : /*[[@{/user/queryRoleZtreeByUserId}]]*/'',
                data: [{name:'userUuids', value: userUuid}],
                success: function (data) {
                    $.fn.zTree.init($("#allocate-user-ztree-id"), setting, data)
                    $("#allocate-user-dialog-id").dialog('open');
                },
                error: function (data) {
                    message(/*[[#{common.error}]]*/)
                }

            })
        }

        function batchAllocateRole() {
            const ids = $("#flexigrid-id").flexiData(0)
            if (ids.length === 0) {
                message(/*[[#{common.select}]]*/'')
                return;
            }
            $("#allocate-user-ztree-id").attr("userUuidArray", ids)
            $.ajax({
                type: 'post',
                dataType: 'json',
                async: false,
                url : /*[[@{/user/queryRoleZtreeAll}]]*/'',
                data: [],
                success: function (data) {
                    $.fn.zTree.init($("#allocate-user-ztree-id"), setting, data)
                    $("#allocate-user-dialog-id").dialog('open');
                },
                error: function (data) {
                    message(/*[[#{common.error}]]*/)
                }

            })
        }

        //双击事件
        function rowDbclick(r){
            $(r).dblclick(
                function() {
                    const columnsArray = $(r).attr('ch').split("_FG$SP_");
                    console.info(columnsArray);
                    $("#detail-user-name-id").text(columnsArray[1]);
                    $("#detail-user-nick-id").text(columnsArray[4]);
                    $("#detail-user-mobile-id").text(columnsArray[3]);
                    $("#detail-user-email-id").text(columnsArray[2]);
                    $("#user-detail-dialog-id").dialog("open");
                });
        }

    </script>
</head>
<body>
<div id="app">
    <nav>
        <span th:text="#{user.name}" sec:authorize="hasRole('ROLE_cldk_data_user_query')"></span>
        <input type="text" id="searchUserName" sec:authorize="hasRole('ROLE_cldk_data_user_query')">
        <span th:text="#{user.nick}" sec:authorize="hasRole('ROLE_cldk_data_user_query')"></span>
        <input type="text" id="searchNiceName" sec:authorize="hasRole('ROLE_cldk_data_user_query')">
        <span th:text="#{user.mobile}" sec:authorize="hasRole('ROLE_cldk_data_user_query')"></span>
        <input type="text" id="searchPhone" sec:authorize="hasRole('ROLE_cldk_data_user_query')">
        <span th:text="#{user.email}" sec:authorize="hasRole('ROLE_cldk_data_user_query')"></span>
        <input type="text" id="searchEmail" sec:authorize="hasRole('ROLE_cldk_data_user_query')">
        <a id="query-user-btn-id"  class="btn" onclick="queryBtn()">
            <i class="glyphicon glyphicon-search"></i>
            <span th:text="#{common.query}" sec:authorize="hasRole('ROLE_cldk_data_user_query')"></span>
        </a>
        <a id="add-btn-id" href="#">
            <i class="glyphicon glyphicon-plus"></i>
            <span th:text="#{common.add}" sec:authorize="hasRole('ROLE_cldk_data_user_add')"></span>
        </a>
        <a id="delete-user-btn-id" href="#">
            <i class="glyphicon glyphicon-trash"></i>
            <span th:text="#{common.delete}" sec:authorize="hasRole('ROLE_cldk_data_user_del')"></span>
        </a>
        <a id="allocate-user-role-id" href="#">
            <i class="glyphicon glyphicon-wrench"></i>
            <span th:text="#{user.role.allocate}" sec:authorize="hasRole('ROLE_cldk_data_user_role')"></span>
        </a>
        <a id="reset-passwd-btn-id" class="btn">
            <i class="glyphicon glyphicon-refresh"></i>
            <span th:text="#{user.reset.password}" sec:authorize="hasRole('ROLE_cldk_data_user_setpwd')"></span>
        </a>
    </nav>
    <table id="flexigrid-id" sec:authorize="hasRole('ROLE_cldk_data_user_query')">

    </table>
    <div id="reset-password-dialog-id" style="display: none">
        <div class="form-group">
            <span th:text="#{main.add.new.password}"></span>
            <input class="form-control" type="password" name="newPassword" id="reset-new-password-id" pattern="^(?=.*[a-z,A-Z])(?=.*[0-9]).{1,8}$" th:title="#{main.password.pattern}">
        </div>
        <div class="form-group">
            <span th:text="#{main.modify.confirm.password}"></span>
            <input  class="form-control" type="password" id="reset-confirm-password-id" pattern="^(?=.*[a-z,A-Z])(?=.*[0-9]).{1,8}$" th:title="#{main.password.pattern}">
        </div>
    </div>
    <div id="add-user-dialog-btn" style="display: none">
        <form id="add-user-form-id" method="post" th:action="@{/user/addUser}">
            <div class="form-group">
                <span th:text="#{main.add.username}"></span><span style="color: red">*</span>
                <input id="add-username-id" class="form-control" type="text" name="userName" pattern="^.{1,15}$" th:title="#{main.password.pattern}">
            </div>
            <div class="form-group">
                <span th:text="#{main.add.new.password}"></span><span style="color: red">*</span>
                <input class="form-control" type="password" name="password" id="add-password-id" pattern="^(?=.*[a-z,A-Z])(?=.*[0-9]).{1,8}$" th:title="#{main.password.pattern}">
            </div>
            <div class="form-group">
                <span th:text="#{main.add.again.password}"></span><span style="color: red">*</span>
                <input class="form-control" type="password"  id="add-again-password-id" pattern="^(?=.*[a-z,A-Z])(?=.*[0-9]).{1,8}$" th:title="#{main.password.pattern}">
            </div>
            <div class="form-group">
                <span th:text="#{main.add.user.email}"></span><span style="color: red">*</span>
                <input class="form-control" type="email" name="email" id="add-user-email-id" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$" th:title="#{main.password.pattern}">
            </div>
            <div class="form-group">
                <span th:text="#{main.add.user.chinese.name}"></span>
                <input class="form-control" type="text"  name="niceName" id="add-user-name-id" pattern="^[\u4e00-\u9fa5]{0,}$" th:title="#{main.password.pattern}">
            </div>
            <div class="form-group">
                <span th:text="#{main.add.user.phone}"></span>
                <input class="form-control" type="number" name="mobile" id="add-user-phone-id" pattern="^((.{0})|(((13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8})))$" th:title="#{main.password.pattern}">
            </div>
        </form>
    </div>

    <div id="mod-user-dialog-btn" style="display: none">
        <form id="mod-user-form-id" method="post" th:action="@{/user/updateUserInfo}">
            <div class="form-group">
                <input style="display: none" id="mod-user-uuid-id" name="userUuid">
                <span th:text="#{main.add.username}"></span><span style="color: red">*</span>
                <input id="mod-username-id" class="form-control" type="text" name="userName" pattern="^.{1,15}$" th:title="#{main.password.pattern}">
            </div>
            <div class="form-group">
                <span th:text="#{main.add.user.email}"></span><span style="color: red">*</span>
                <input class="form-control" type="email" name="email" id="mod-user-email-id" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$" th:title="#{main.password.pattern}">
            </div>
            <div class="form-group">
                <span th:text="#{main.add.user.chinese.name}"></span>
                <input class="form-control" type="text"  name="niceName" id="mod-user-name-id" pattern="^[\u4e00-\u9fa5]{0,}$" th:title="#{main.password.pattern}">
            </div>
            <div class="form-group">
                <span th:text="#{main.add.user.phone}"></span>
                <input class="form-control" type="number" name="mobile" id="mod-user-phone-id" pattern="^((.{0})|(((13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8})))$" th:title="#{main.password.pattern}">
            </div>
        </form>
    </div>
    <div id="delete-user-dialog-id" style="display: none">

    </div>
    <div id="allocate-user-dialog-id" style="display: none">
        <ul id="allocate-user-ztree-id" class="ztree">

        </ul>
    </div>

    <div id="user-detail-dialog-id" style="display: none">
        <div>
            <span th:text="#{user.name}"></span>:
            <span id="detail-user-name-id"></span>
        </div>
        <div>
            <span th:text="#{user.nick}"></span>:
            <span id="detail-user-nick-id"></span>
        </div>
        <div>
            <span th:text="#{user.mobile}"></span>:
            <span id="detail-user-mobile-id"></span>
        </div>
        <div>
            <span th:text="#{user.email}"></span>:
            <span id="detail-user-email-id"></span>
        </div>
    </div>
</div>
</body>
</html>